<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性,方法,监听器</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        {{ fullName }}
        {{ age }}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                firstName:"Dell",
                lastName:"Lee",
                fullName:"Dell Lee",
                age:28
            },
            //计算属性(有缓存机制)
            // computed:{
            //     fullName:function () {
            //         console.log("计算了一次");
            //         return this.firstName + " " + this.lastName
            //     }
            // }

            //方法(没有缓存机制)
            // methods:{
            //     fullName:function () {
            //         console.log("计算了一次");
            //         return this.firstName + " " + this.lastName;
            //     }
            // }

            //监听器
            watch:{
                firstName:function () {
                    console.log("计算");
                    this.fullName = this.firstName + " " + this.lastName;
                },
                lastName:function () {
                    console.log("计算");
                    this.fullName = this.firstName + " " + this.lastName;
                }
            }

        })
    </script>

</body>
</html>